<template>

    <div>
        <div style="margin-top: 50px;">

            <div class="info">
                <span class="title">申请时间：</span>
                <span>{{this.initial_data.create_time}}</span>
            </div>

            <div class="info">
                <span class="title">商户名称：</span>
                <span>{{this.initial_data.name}}</span>
            </div>

            <div class="info">
                <span class="title">商户类型：</span>
                <span>{{this.initial_data.store_type_id === 1 ? '餐饮' : '商城'}}</span>
            </div>

            <div class="info">
                <span class="title">商户分类：</span>
                <span>{{this.initial_data.class_name}}</span>
            </div>

            <div class="info">
                <span class="title">手机号码：</span>
                <span>{{this.initial_data.mobile}}</span>
            </div>

            <div class="info">
                <span class="title">联系电话：</span>
                <span>{{this.initial_data.contact}}</span>
            </div>

            <div class="info">
                <span class="title">商户地址：</span>
                <span>{{this.initial_data.address}}</span>
            </div>

            <div class="info">
                <span class="title">经纬度：</span>
                <span style="margin-left: 15px">{{this.initial_data.lat}}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <span>{{this.initial_data.long}}</span>
            </div>

            <div class="info">
                <span class="title">营业时间：</span>
                <span>上午：{{this.time_am_start + ' - ' + this.time_am_end}}</span>
                <span style="margin-left: 15px">下午：{{this.time_pm_start + ' - ' + this.time_pm_end}}</span>
            </div>

            <div class="info">
                <span class="title">商户简介：</span>
                <div style="width: 500px;margin-left: 75px;margin-top: -40px;line-height: 30px">
                    <p>{{this.initial_data.introduce}}</p>
                </div>
            </div>

            <div class="info" v-if="visible">
                <span class="title">是否排队：</span>
                <span>{{this.initial_data.is_lineup === 1 ? '需要' : '不需要'}}</span>
            </div>

            <div class="info" v-if="visible">
                <span class="title">支持预定：</span>
                <span>{{this.initial_data.is_book === 1 ? '支持' : '不支持'}}</span>
            </div>

            <div class="info" v-if="visible">
                <span class="title">支持外卖：</span>
                <span>{{this.initial_data.take_out === 1 ? '支持' : '不支持'}}</span>
            </div>

            <div class="info" v-if="visible">
                <span class="title">配送费：</span>
                <span style="margin-left: 10px">{{this.initial_data.delivery_fee}}</span>
            </div>

            <div class="info" v-if="visible">
                <span class="title">起送价格：</span>
                <span>{{this.initial_data.init_delivery_price}}</span>
            </div>

            <div class="info" v-if="visible">
                <span class="title">人均消费：</span>
                <span>{{this.initial_data.per_capita}}</span>
            </div>

            <div class="info">
                <span class="title">商户logo：</span>
                <el-image style="width: 100px; height: 100px" :fit="fit" :src="this.initial_data.logo"></el-image>
                <span class="title">营业许可证：</span>
                <el-image style="width: 100px; height: 100px" :fit="fit"
                          :src="this.initial_data.business_license"></el-image>
                <span class="title" v-if="visible">食品安全许可证：</span>
                <el-image
                        v-if="visible"
                        style="width: 100px; height: 100px"
                        :fit="fit"
                        :src="this.initial_data.food_license">
                </el-image>
            </div>

        </div>

        <div style="margin-left: 90px;height: 300px;margin-top: 50px">
            <el-button size="mini" type="primary" @click="handleUpdateStatus(2)">通过</el-button>
            <el-button size="mini" type="danger" @click="handleUpdateStatus(3)">驳回</el-button>
        </div>
    </div>

</template>

<script>
    import TreeSelect from '@riophae/vue-treeselect'
    import '@riophae/vue-treeselect/dist/vue-treeselect.css'

    export default {
        name: 'read-merchant',
        components: {TreeSelect},
        data() {
            return {
                initial_data: {},//获取初始数据
                time_am_start: '',
                time_am_end: '',
                time_pm_start: '',
                time_pm_end: '',
                loading: false,
                fit: 'contain',
                visible: true
            }
        },
        methods: {
            //初始数据
            defaultFn() {
                this.loading = true;
                this.$http.get('/web/store/info', {
                    params: {
                        'token': localStorage.getItem('user_token'),
                        'store_id': this.$route.query.id
                    }
                }).then((response) => {
                    if (response.data.status === 'success') {


                        this.initial_data = response.data.data;

                        if (this.initial_data.store_type_id === 1) {
                            this.visible = true;
                        } else {
                            this.visible = false;
                        }

                        this.time_am_start = this.initial_data.am.split('-')[0];
                        this.time_am_end = this.initial_data.am.split('-')[1];
                        this.time_pm_start = this.initial_data.pm.split('-')[0];
                        this.time_pm_end = this.initial_data.pm.split('-')[1];
                    }
                    this.loading = false;
                }).catch((error) => {
                    this.loading = false;
                })
            },
            handleUpdateStatus(status){
                this.loading = true;
                this.$http.post('/web/store/update/status', {
                    token: localStorage.getItem('user_token'),
                    id: this.initial_data.id,
                    status: status
                }).then( response => {
                    if (response.data.status === 'success'){
                        this.$message.success('审核成功');
                        this.$router.push({name: 'Merchant-manage'})
                    }
                    this.loading = false;
                }).catch(() => {
                    this.loading = false;
                })
            }
        },
        mounted() {
            this.defaultFn();
        }
    }
</script>

<style scoped lang="scss">
    .info {
        margin-left: 24px;
        margin-top: 24px;
    }

    .title {
        font-size: 14px;
        color: #606266;
    }

</style>
